<template>
    <div>
      <el-container>
        <el-main><mavon-editor
          class="md"
          style="min-height: 100%;height: 90vh;width: 100%"
          :value="question.content"
          :subfield = "prop.subfield"
          :defaultOpen = "prop.defaultOpen"
          :toolbarsFlag = "prop.toolbarsFlag"
          :editable="prop.editable"
          :scrollStyle="prop.scrollStyle"
        >
        </mavon-editor></el-main>
        <el-aside width="auto">
          <el-select v-model="code.type" placeholder="请选择编程语言" style="background-color: #ffffff;float: left;margin-top: 15px;width: 100%;">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input
            type="textarea"
            :rows="26"
            style="margin-top: 4vh"
            placeholder="请输入代码"
            v-model="code.code">
          </el-input>
          <el-button type="primary" style="margin-top: 2vh" @click="submitCode">提交代码</el-button>
        </el-aside>
      </el-container>
    </div>
</template>

<script>
  import Api from '../common/api';
    export default {
        name: "submit-page",
      data(){
        return {
          code:{type:'',code:''},
          question:'',
          options: [{
            value: 'cpp',
            label: 'cpp'
          }, {
            value: 'c',
            label: 'c'
          }, {
            value: 'java',
            label: 'java'
          }, {
            value: 'python',
            label: 'python'
          }, {
            value: 'go',
            label: 'go'
          }, {
            value: 'js',
            label: 'js'
          }],
          userInfo:''
        }
      },
      methods:{
        submitCode(){
          let params={
            type:this.code.type,
            code:this.code.code,
            user_id:this.userInfo.id,
            author_id:this.question.author_id,
            title:this.question.title,
            username:this.userInfo.username,
            create_time:new Date(),
            final_status:0,
            question_id:this.question.id
          };
          if(this.code.id){
            params.id = this.code.id
          }
          Api.LRapiCall('post','/code/save',params).then(resolve=>{
            if (resolve.data.code === 200){
              this.$router.push('/index/submitPage');
            }else{
              this.$message.error(reject.data.msg);
            }
          },reject=>{
            console.log(reject);
            this.$message.error(reject.data.msg);
          });
        }
      },
      beforeRouteEnter(to, from, next) {
        next(vm => {
          // console.log(vm);//当前组件的实例
        });
      },
      created(){
        let user = Api.getStorageItem('user');
        if (!user) {
          this.$router.push('/login');
        } else if (user === '过期') {
          localStorage.removeItem('user');
          this.$message.error('您的登录已经过期，请重新登录');
          this.$router.push('/login');
        } else {
          this.userInfo = user;
        }
        let question_id = this.$route.query.question_id;
        Api.apiCall('GET','/get_question_detail?id='+question_id).then(resolve=>{
          if (resolve.data.code === 200){
            this.question = resolve.data.data;
          }else{
            setTimeout(()=>{
              this.$router.push('/login')
            },3000);
          }
        });
        let id = this.$route.query.id;
        if (id){
          Api.apiCall('GET','/get_code_by_id?id='+id).then(resolve=>{
            if (resolve.data.code === 200){
              this.code = resolve.data.data;
            }else{
              setTimeout(()=>{
                this.$router.push('/login')
              },3000);
            }
          });
        }
      },
      computed: {
        prop () {
          let data = {
            subfield: false,// 单双栏模式
            defaultOpen: 'preview',//edit： 默认展示编辑区域 ， preview： 默认展示预览区域
            editable: false,
            toolbarsFlag: false,
            scrollStyle: true
          };
          return data
        }
      }
    }
</script>

<style scoped>
.table-class{
  display: flex;
}
</style>
